<template>
  <!--角色管理 {{roleInfo}}-->
  <el-tree
    ref="treeRef"
    :data="state.modules"
    :node-key="nodeKey"
    :props="defaultProps"
    :current-node-key="roleInfo.currentNodeKey"
    show-checkbox
    :expand-on-click-node="false"
    :check-on-click-node="true"
    default-expand-all
    highlight-current
    empty-text="加载中"
    :default-expanded-keys="[1]"
    @node-click="handleNodeClick"
    @check-change="checkChange"
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node" @click="mychange($event)">
        <span>
          {{ node.label }}
        </span>
        <span>
          <!--模块的操作按钮--> &nbsp;
          <role-button :node="node" :moduleId="data[nodeKey]"></role-button>
          <!--模块的操作按钮-->
          <span v-show="state.haveCols[data[nodeKey]]" >
            <el-popover
              placement="left"
              :width="400"
              sytle="height:400px;"
              trigger="click"
            >
              <template #reference>
                <el-button style="margin-right: 16px" size="small">字段</el-button>
              </template>
              <!--模块的列表--> &nbsp; <br><br>
              <role-grid  kind="gridIds" placeholder="权限到列表的列" :moduleId="data[nodeKey]"></role-grid>
              <!--模块的列表--> &nbsp; <br><br>
              <role-grid  kind="gridIdsNot" placeholder="不可以使用的列" :moduleId="data[nodeKey]"></role-grid>
              <!--模块的查询--> &nbsp; <br><br>
              <role-grid  kind="findIds" placeholder="权限到查询" :moduleId="data[nodeKey]"></role-grid>
              <!--模块的查询--> &nbsp; <br><br>
              <role-grid  kind="findIdsNot" placeholder="不可用的查询字段" :moduleId="data[nodeKey]"></role-grid>
              <!--模块的资源权限--> &nbsp; <br><br> 
              <role-grid  kind="resources" placeholder="资源权限" :moduleId="data[nodeKey]"></role-grid>
              <!--模块的后端API--> &nbsp; <br><br>
              <role-grid  kind="APIs" placeholder="可用的后端API" :moduleId="data[nodeKey]"></role-grid>
            </el-popover>
          </span>
          <span v-show="!state.haveCols[data[nodeKey]]"> &nbsp; &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp;   &nbsp; &nbsp; </span>
        </span>
      </span>
    </template>
  </el-tree>  
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, watch } from 'vue'
  import { ElTree } from 'element-plus'
  import type Node from 'element-plus/es/components/tree/src/model/node'

  // 模块的操作按钮
  import roleButton from './role-comp/role-button.vue'
  // 权限到列表
  import roleGrid from './role-comp/role-data.vue'

  // 获取状态
  import { getRoleState } from './state/state-role'

  // 接口
  import type { IRoleModule, IRoleCurrent } from './types/10-role'
   
  /**
   * 角色的维护
   */
  export default defineComponent({
    name: 'nf-role-module',
    inheritAttrs: false,
    components: {
      roleButton,
      roleGrid
    },
    props: {
      nodeKey: {
        type: String,
        default: 'id'
      }
    },
    setup(props, context) {

      const state = getRoleState()

      const defaultProps = {
        children: 'children',
        label: 'label'
      }
      
      const treeRef = ref<InstanceType<typeof ElTree>>()
      
      const roleInfo = reactive<IRoleCurrent>({
        currentNodeKey: '', // 当前选择的节点
        isCheck: false,  // 当前节点是否打对号
        checkKeys: new Set([]) // 已经选择的 key 的集合
      })

      const handleNodeClick = (data: IRoleModule) => {
        const arr = treeRef.value.getCheckedKeys(false)
        roleInfo.currentNodeKey = data[props.nodeKey]
        roleInfo.isCheck = arr.includes(roleInfo.currentNodeKey)

      }

      // 复选框被单击
      const checkChange = (data: IRoleModule, isCheck: boolean, sonHasCheck: boolean) => {
        // console.log('checkChange - data', data)
        // console.log('checkChange - isCheck', isCheck)
        // console.log('checkChange- sonHasCheck', sonHasCheck)

        // 如果当前节点是选中状态，则记入
        const id = data[props.nodeKey]
        if (sonHasCheck || isCheck) {
          // 子节点被选择
          roleInfo.checkKeys.add(id)
        } else {
          roleInfo.checkKeys.delete(id)
        }
      }

      // 设置角色可以使用的模块
      watch(roleInfo.checkKeys, () => {
        state.roleInfo.rolePower.moduleIds.length = 0
        state.roleInfo.rolePower.moduleIds.push(...roleInfo.checkKeys)
      })

      const getCheckedNodes = () => {
        console.log(treeRef.value.getCheckedNodes(false, false))
      }
      const getCheckedKeys = () => {
        console.log(treeRef.value.getCheckedKeys(false))
      }
      const setCheckedNodes = () => {
        treeRef.value.setCheckedNodes(
          [
            {
              id: 5,
              label: 'Level two 2-1',
            },
            {
              id: 9,
              label: 'Level three 1-1-1',
            },
          ] as Node[],
          false
        )
      }
      const setCheckedKeys = () => {
        treeRef.value.setCheckedKeys([9], false)
      }
      const resetChecked = () => {
        treeRef.value.setCheckedKeys([], false)
      }
 
      const mychange = (e) => {
        console.log('change----e', e)
        // 防止事件冒泡
        e.stopPropagation()

      }

      return {
        mychange,
        state,
        roleInfo,
        treeRef,
        checkChange,
        //
        getCheckedNodes,
        getCheckedKeys,
        setCheckedNodes,
        setCheckedKeys,
        resetChecked,
        handleNodeClick,
        defaultProps
      }
    }
  })
</script>


<style>
.my-tree-node {
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>